<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻发布管理系统</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">部门列表</div>
        <div class="layui-card-body">
            <table id="deptlist" lay-filter="deptFilter"></table>
        </div>
    </div>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>
    //加载所需的layui模块（table,jquery,layer）
    layui.use(['table', 'jquery', 'layer', 'util', 'form'], function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        //渲染表格数据
        table.render({
            elem: '#deptlist',  //用于渲染组件的id
            url: "http://localhost:80/dept/list",   //服务端数据接口地址
            page: {             //开启分页
                limit: 2,       //每页限制条数
                limits: [1, 2, 3, 5],
                theme: '#1E9FFF'
            },
            cols: [[
                {type: 'checkbox'},
                {title: '部门编号', field: 'deptid'},
                {title: '部门名称', field: 'deptname'},
                {title: '操作', templet: '#rowTools', width: 320}
            ]]
        })



        //为表格绑定行工具事件
        table.on('tool(deptFilter)', function (obj) {
            let event = obj.event;
            let tr = obj.tr;
            let data = obj.data;
            let util = layui.util;

            if (event === 'details') {
                //部门详情
                details(data);
            } else if (event === 'edit') {
                //编辑部门
            } else if (event === 'del') {
                //删除部门
                layer.confirm('确认删除吗?', {icon: 3}, function () {
                    //执行ajax请求，完成数据删除...
                    obj.del();
                    layer.msg('数据收集不易，仅做dom删除');
                })
            }
        });



        //详情
        function details(data) {
            layer.open({
                type: 1,
                content: $('#dept-details-dialog'),
                title: "部门详情信息",
                area: '960px',
                closeBtn: 2,
                shadeClose: true,   //点击遮罩时关闭弹层
                btn: ['关闭'],
                btnAlign: 'c',
                success: function (layero, index) {
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象

                    $('#deptId').text(data.deptid);
                    $('#deptName').text(data.deptname);
                    $('#deptInfo').text(data.deptinfo);
                }
            })
        }

    })


</script>

<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>



<!--歌曲详情弹层-->
<div id="dept-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <td>部门编号:</td>
            <td  colspan="5" id="deptId">xxx</td>
        </tr>
        <tr>
            <td>部门名称:</td>
            <td colspan="5" id="deptName">xxxx</td>
        </tr>
        <tr>
            <td>部门信息:</td>
            <td colspan="5" id="deptInfo">xxxx</td>
        </tr>
    </table>
</div>


</body>
</html>